<template>
  <div class="home-container">
    <!-- 轮播图 -->
    <el-carousel :interval="4000" type="card" height="400px" class="banner">
      <el-carousel-item v-for="banner in banners" :key="banner.id">
        <img :src="banner.image" class="banner-image" />
      </el-carousel-item>
    </el-carousel>
    
    <!-- 分类导航 -->
    <div class="category-section">
      <h2>商品分类</h2>
      <el-row :gutter="20">
        <el-col
          v-for="category in productStore.categories"
          :key="category"
          :xs="12"
          :sm="8"
          :md="6"
          :lg="4"
        >
          <el-card
            class="category-card"
            @click="navigateToCategory(category)"
          >
            <el-icon :size="40"><Goods /></el-icon>
            <span>{{ category }}</span>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 热门商品 -->
    <div class="hot-products">
      <h2>热门商品</h2>
      <el-row :gutter="20">
        <el-col
          v-for="product in hotProducts"
          :key="product.id"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
        >
          <el-card
            class="product-card"
            :body-style="{ padding: '0px' }"
            @click="viewProduct(product.id)"
          >
            <img :src="product.image" class="product-image" />
            <div class="product-info">
              <h3>{{ product.name }}</h3>
              <p class="product-description">{{ product.description }}</p>
              <div class="product-price">¥{{ product.price }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useProductStore } from '../stores/product'

const router = useRouter()
const productStore = useProductStore()
const hotProducts = ref([])

// 模拟轮播图数据
const banners = ref([
  {
    id: 1,
    image: 'https://via.placeholder.com/800x400?text=Banner+1'
  },
  {
    id: 2,
    image: 'https://via.placeholder.com/800x400?text=Banner+2'
  },
  {
    id: 3,
    image: 'https://via.placeholder.com/800x400?text=Banner+3'
  }
])

onMounted(async () => {
  await productStore.fetchCategories()
  await productStore.fetchProducts()
  // 获取前8个商品作为热门商品
  hotProducts.value = productStore.products.slice(0, 8)
})

const navigateToCategory = (category) => {
  router.push({
    path: '/products',
    query: { category }
  })
}

const viewProduct = (id) => {
  router.push(`/product/${id}`)
}
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.banner {
  margin-bottom: 40px;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-section,
.hot-products {
  margin-bottom: 40px;
}

h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.category-card {
  text-align: center;
  padding: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.category-card:hover {
  transform: translateY(-5px);
}

.category-card .el-icon {
  display: block;
  margin: 0 auto 10px;
  color: #409EFF;
}

.product-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-info {
  padding: 14px;
}

.product-description {
  color: #666;
  margin: 10px 0;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  color: #f56c6c;
  font-size: 20px;
  font-weight: bold;
}
</style> 